<template>

	<view class="listContainer">
		<!-- 左侧 -->
		<scroll-view class="leftBox" :scroll-top="scrollTop" bindscrolltolower="lower" scroll-y="true" :style="{height:height}">
			<view  :class="[leftIndex == index?'selectBigIndex leftItem':'leftItem']" v-for="(item,index) in leftList"  :data-id="item.id" :key="index" @click="leftItemClicked(index)">
				<view :class="[leftIndex == index?'selectIndex itemBox':'itemBox']">
					<text>{{item.name}}</text>
					<text v-if="item.type">{{item.type}}</text>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧 -->
		<scroll-view class="rightBox" :scroll-top="scrollTop" bindscrolltolower="lower" scroll-y="true" :style="{height:height}">
			<view class="rightItem" v-for="(item,index) in rightList" :key="index" :data-id="item.id" :data-name = "item.name" :data-imgSrc = "item.images[0].url" @click="rightItemClicked">
				<image :src="item.images[0].url" style="width: 240rpx;height: 100%;" mode="aspectFill"></image>
				<view class="rightView">
					<text style="font-size: 34rpx;">{{item.name}}</text>
					<view class="carDetailView">
						<text style="color:#FF4785;font-size: 28rpx;">¥ {{item.final_price}}</text>
						<text style="color:#9CA3AF;font-size: 28rpx;text-decoration: line-through;">¥ {{item.price}}</text>
					</view>
		<!-- 			<text v-if="type==0">{{item.num}}</text>
					<text v-else>{{item.carMoney}}</text> -->
				</view>
			</view>
		</scroll-view>

	</view>

</template>

<script>
	export default {
		props: {
			// type: {
			// 	default: 0 , //0 陪驾出租 1 单独租车
			// 	type: Number,
			// },
			leftList: {
				type: Array,
				default: new Array(),
			},
			rightList: {
				type: Array,
				default: new Array(),

			}
		},
		data() {
			return {
				height: '100px',
				scrollTop: 0,
				leftIndex:0
			};

		},
		mounted:function() {
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					that.height = (res.windowHeight) + 'px'
				}
			})
		},
		methods: {
			leftItemClicked(index) {
	
				this.leftIndex = index;
				console.log('left'+this.leftList[index])
				var categoryId = this.leftList[index].id
				
				this.$emit('leftItemClick',{categoryId})
				
			},
			rightItemClicked(e) {
				
				var productId= e.currentTarget.dataset.id;
				var name= e.currentTarget.dataset.name;
				var imgSrc= e.currentTarget.dataset.imgsrc;
				this.$emit('rightItemClick',{productId,name,imgSrc})
			}
		}
	}
</script>

<style lang="scss">
	.listContainer {
		width: 100vw;
		display: flex;
		height: 100%;

		.leftBox {
			flex: 1;
			overflow: scroll;
			background: #F7F7F7;
			.selectBigIndex{
				background: #FFFFFF;

			}
			.leftItem {
				height: 100rpx;
				margin-bottom: 8rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.itemBox{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 60%;
					width: 100%;
				}
				.selectIndex{
					border-left: 2px solid #FF4D4F;
				}
			}
		}

		.rightBox {
			flex: 2;
			overflow: scroll;

			.rightItem {
				width: 100%;
				
				height: 120px;
				margin-bottom: 4px;
				display: flex;
				padding: 5px;
				box-sizing: border-box;
				align-items: center;
				// justify-content: center;
				.rightView{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 24rpx;
					color:#333333;
					margin-left: 10px;
					.carDetailView{
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
					}
				}
			}
		}

	}
</style>
